// 主函数 main.js
// 创建一组全局变量
// 保存画布
var cvs1,cvs2;
// 保存画笔
var ctx1,ctx2;
// 保存画布的宽度和高度（因为两个画布是一样的，所以只保存一个就ok）
var canWidth,canHeight;
// 保存背景图片
var bgImage;
// 保存海葵对象
var anemone;
// 保存食物对象
var food;
// 保存大鱼对象
var bigFish;
// 保存鼠标的位置
var mouse_x,mouse_y;
// 保存游戏分数
var gameScore;
// 上一帧被执行的时间
var lastTime;
// 两帧间隔的时间差
var deltaTime;
// 保存动画对象
var animtes;
// 开始游戏，入口函数
function game(){
	init()
	gameloop()
}
// init 初始化函数（初始化资源）
function init(){
	// 保存画布
	cvs1=document.getElementById("cvs1");
	cvs2=document.getElementById("cvs2");
	// 保存画笔
	ctx1=cvs1.getContext("2d");
	ctx2=cvs2.getContext("2d");
	// 保存画布的宽度和高度
	canWidth=cvs1.width;
	canHeight=cvs2.height;
	// 创建背景图片对象，下载图片
	bgImage=new Image()
	bgImage.src="./img/background.jpg";
	bgImage.onload=drawBackGround();
	// 保存上一帧的时间
	lastTime=Date.now();
	// 初始两帧时间间隔
	deltaTime=0;
	// 实例化海葵对象
	anemone=new AneMone();
	anemone.init();
	// 实例化食物对象
	food=new Food();
	food.init()
	// 实例化大鱼对象
	bigFish=new BigFish();
	bigFish.init()
	// 初始化鼠标的位置：页面的中心
	mouse_x=canWidth*0.5;
	mouse_y=canHeight*0.5;
	// 为画布绑定鼠标移动事件
	cvs1.addEventListener("mousemove",handleMove);
	// 实例化分数对象
	gameScore=new Score();
	// 实例化动画对象
	animates=new Animate();
	animates.init()
}
// gameloop:定时器，绘制画布
function gameloop(){
	// 创建智能定时器调用 gameloop
	requestAnimationFrame(gameloop);
	// 计算两帧之间间隔时间
	var now=Date.now();
	deltaTime=now-lastTime;
	lastTime=now;
	if(deltaTime>40) deltaTime = 40;
	// 注：不同浏览器计算结果不同
	// 调用绘制背景图函数
	drawBackGround();
	// 调用海葵对象绘制函数
	anemone.draw()
	// 监听食物的数量，进行绘制
	food.foodMonitor();
	// 调用食物对象绘制函数
	food.draw();
	// 清除画布一
	ctx1.clearRect(0,0,canWidth,canHeight);
	// 绘制大鱼
	bigFish.draw();
	// 碰撞检测
	fishFoodCollision();
	// 绘制分数
	gameScore.draw()
	// 绘制动画
	animates.draw();
}
// 当网页加载成功后调用 game
document.body.onload=game;
// 创建函数，用于捕获鼠标的位置
function handleMove(e){
	// 鼠标相对于画布x的位置
	if(e.offsetX || e.layerX){
		mouse_x = e.offsetX == undefined ? e.layerX : e.offsetX;
	}
	// 鼠标相对于画布y的位置
	if(e.offsetY || e.layerY){
		mouse_y= e.offsetY == undefined ? e.layerY : e.offsetY;
	}
}